<template>
	<view class="network" v-if="networkShow">
		<image
			class="pic"
			src="/static/images/chicken/network_null.png"
			mode="widthFix"></image>
		<view class="text">
			信号丢失，点击按钮重新加载
		</view>
		<view class="btn" @click="reload">
			重试
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			networkShow: {
				type: Boolean,
				default: false,
			}
		},
		methods: {
			reload() {
				// #ifdef H5
				window.location.reload();
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.network {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 11;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		background-color: #FFF4E5;
		.pic {
			width: 300rpx;
		}
		.text {
			margin: 60rpx 0 30rpx;
			color: #732011;
			opacity: .8;
		}
		.btn {
			width: 180rpx;
			height: 64rpx;
			opacity: 0.8;
			border: 1rpx solid #732011;
			border-radius: 33rpx;
			color: #732011;
			text-align: center;
			line-height: 64rpx;
		}
	}
</style>